<template>
  <div class="reg">
    <login-top topmiddle="登录 blibli">
      <div
        slot="right"
        @click="$router.push('/reg')"
      >注册</div>
    </login-top>
    <login-text
      label="用户名"
      placeholder="请输入用户名"
      rule="^.{6,16}$"
      style="margin: 15px 0"
      @inputChange="(res) => (username = res)"
    />
    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password"
      rule="^.{6,16}$"
      @inputChange="(res) => (password = res)"
    />
    <login-btn
      btntext="登 录"
      @regSubmit="regSubmit"
    ></login-btn>
  </div>
</template>
<script>
import LoginTop from '../components/common/LoginTop'
import LoginText from '../components/common/LoginText'
import LoginBtn from '../components/common/LoginBtn'
// import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  components: {
    LoginTop, LoginText, LoginBtn
  },
  methods: {
    async regSubmit () {
      const rule = /^.{6,16}$/
      if (rule.test(this.username) && rule.test(this.password)) {
        const model = {
          username: this.username,
          password: this.password
        }
        const res = await this.$http.login(model)
        // console.log(res)
        if (res.data.code === 200) {
          window.sessionStorage.setItem('token', res.data.token)
          window.sessionStorage.setItem('id', res.data.id)
          window.sessionStorage.setItem('name', this.username)
          this.$store.commit('userName')
          this.$msg.fail('欢迎你' + this.username)
          this.$router.push('./home')
        } else {
          this.$msg.fail('密码或账号错误')
        }
      } else {
        this.$msg.fail('格式不正确,请重新输入')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
